<template>
    <div class="list-wrap">
        <flexbox style="margin-bottom: 8px">
            <HSuggestInputSearch size="default" allowClear placeholder="请输入需求名称" @change="handleSearch" />
        </flexbox>
        <div
            v-infinite-scroll="getList"
            infinite-scroll-watch-disabled="scrollDisabled"
            :infinite-scroll-distance="100"
            class="margin-t-8"
            ref="requireListARef"
            style="flex: 1; flex-shrink: 0; overflow-y: auto; scrollbar-width: none; padding: 0"
            v-empty="!isEmpty"
        >
            <div
                :class="['workbench-require-card-item', disabled ? 'disabled-item' : '']"
                v-for="item of list"
                :key="item.id"
                style="background: #fff"
            >
                <flexbox>
                    <flexbox style="flex: 1; overflow: hidden">
                        <div style="flex-shrink: 0; margin-left: 4px; width: 16px">
                            <div class="show-icon">
                                <my-icon type="icondrag" />
                            </div>
                        </div>
                        <a-tag style="flex-shrink: 0; border-radius: 12px; background: #fff" v-if="item.level">
                            <HLevel :level="item.level" />
                        </a-tag>
                        <HProductType :type="$filters.valToNameFilter('requireType', item.requireType)" style="flex-shrink: 0" />
                        <HToolTip :title="item.requireName">
                            <span style="color: #172b4d; margin-left: 4px">{{ item.requireName }}</span>
                        </HToolTip>
                    </flexbox>
                </flexbox>
            </div>
            <LoadMoreTip :isLoadMore="loading && query.pageNum > 1" :isNoMore="!!(list.length && total === list.length)" />
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import HToolTip from '@/components/HToolTip/index.vue';
import LoadMoreTip from '@/components/Content/LoadMoreTip.vue';
import { HLevel, HProductType, HSuggestInputSearch } from '@/components';
import { useSortable } from '@/hooks/common/useSortable';
import { defineComponent, ref, unref, reactive, toRefs, nextTick, watch, getCurrentInstance } from 'vue';
export default defineComponent({
    components: {
        HToolTip,
        HLevel,
        HProductType,
        HSuggestInputSearch,
        LoadMoreTip
    },
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const instance: any = getCurrentInstance();
        const requireListARef = ref<any>();
        const state = reactive<any>({
            list: [],
            scrollDisabled: true,
            query: {
                pageNum: 1,
                pageSize: 10,
                selectType: 'signpost'
            },
            total: 0,
            searchValue: '',
            isEmpty: false,
            destorySortable: null,
            loading: false
        });
        const getList = async (isRefresh = false) => {
            if (state.scrollDisabled) {
                return;
            }
            state.isEmpty = false;
            state.loading = true;
            state.scrollDisabled = true;
            // 刷新值
            if (isRefresh) {
                const pageSize = state.query.pageNum * state.query.pageSize;
                const { success, moule, totalCount } = await api.productRequireModel.selectPage({
                    ...state.query,
                    pageNum: 1,
                    pageSize
                });
                if (success) {
                    state.list = [...moule];
                    state.total = totalCount;
                }
            } else {
                const { success, moule, totalCount } = await api.productRequireModel.selectPage(state.query);
                if (success) {
                    if (state.query.pageNum === 1) {
                        state.list = [...moule];
                    } else {
                        state.list = [...state.list, ...moule];
                    }
                    if (moule.length === state.query.pageSize) {
                        state.query.pageNum++;
                        state.scrollDisabled = false;
                    } else {
                        state.scrollDisabled = true;
                    }
                    state.total = totalCount;
                }
            }
            state.isEmpty = !state.list.length;
            state.loading = false;
        };
        const handleChangeVersionNumber = (val) => {
            if (val) {
                state.query.relateVersionNumber = val.versionNumber;
            } else {
                state.query.relateVersionNumber = '';
            }
            state.scrollDisabled = false;
            state.query.pageNum = 1;
            getList();
        };
        const handleSearch = (val) => {
            state.query = {
                ...state.query,
                requireName: val ? val.trim() : val
            };
            state.scrollDisabled = false;
            state.query.pageNum = 1;
            getList();
        };
        const initSortable = () => {
            nextTick(() => {
                const { initSortable, destorySortable } = useSortable(unref(requireListARef), {
                    onUpdate: (evt: any) => {
                        console.log(evt);
                    },
                    forceFallback: false,
                    sort: false,
                    filter: '.disabled', // 禁止拖拽
                    group: {
                        pull: true,
                        put: false
                    },
                    onMove: (e) => {
                        console.log(e);
                        return true; // 禁止拖拽到这个元素中
                    },
                    onStart: (e) => {
                        store.commit('user/SET_MOVEDATA', {
                            ...state.list[e.oldIndex],
                            type: 3
                        });
                    }
                });
                initSortable();
                state.destorySortable = destorySortable;
            });
        };
        // 更新该业务需求下的产品需求
        instance.proxy.$mitt.on('unVersionProRequireList-subversionSystemItem-refreshProList', (query) => {
            state.scrollDisabled = false;
            state.query = {
                ...state.query,
                ...query,
                pageNum: 1
            };
            getList();
        });

        const init = () => {
            state.scrollDisabled = false;
            state.query = {
                ...state.query,
                pageNum: 1,
                catalogCode: props.lubiaoDetail.catalogCode
            };
            getList();
        };

        init();

        watch(
            () => props.disabled,
            (n) => {
                if (n) {
                    // 销毁拖动
                    state.destorySortable && state.destorySortable();
                } else {
                    initSortable();
                }
            },
            {
                immediate: true
            }
        );

        return {
            requireListARef,
            ...toRefs(state),
            getList,
            handleChangeVersionNumber,
            init,
            handleSearch
        };
    }
});
</script>

<style scoped lang="less">
@import './styles/common.less';
.list-wrap {
    display: flex;
    flex-direction: column;
}
::v-deep(.ant-badge-status-text) {
    margin-left: 0 !important;
}
</style>